<template>
  <div class="User">
    <!-- 背景图片盒子 -->
    <div class="UserImg">
      <img
        :src="HeadImg"
        alt=""
      />
      <!-- 用户登录盒子 -->
      <div class="UserCore">
        <div class="head-portrait">
          <!-- 头像 -->
          <img :src="BgcImg" alt="" class="icon" />
        </div>
        <!-- 跳转登录页面 -->
        <div class="Userdata">
          <!-- 用户名 -->
          <div class="UserName">
            {{ UserResList.nickname || "游客" }}
          </div>
          <div class="LoginBtn">
            <!-- 登录 -->
            <van-button
              type="primary"
              size="small"
              to="/login"
              v-if="!this.$store.state.LoginState"
              :style="{ width: '25%', bordeRadius: '10%' }"
              >去登录</van-button
            >
            <!-- 退出 -->
            <div class="OutBtn" v-else>
              <van-button
                type="primary"
                round
                size="small"
                @click="SignOut"
                :style="{ width: '20%', height: '25px', marginTop: '-50px' }"
                >退出
              </van-button>
              <h6>编辑个人资料 <van-icon name="play" /></h6>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 宫格图 -->
    <div class="UserMore">
      <van-grid
        column-num="3"
        :border="false"
        icon-size="20px"
        gutter="30px"
        :clickable="true"
      >
        <van-grid-item
          :icon="item.icom"
          :text="item.text"
          v-for="item in $store.state.Userlist"
          :key="item.id"
          @click="grid(item.id)"
        />
      </van-grid>
    </div>
    <div class="advertisement">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="" />
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { UserResRequest, UserLogoutquest } from "@/api";
export default {
  data() {
    return {
      UserResList: [],
    };
  },
  async created() {
    // 先判断token值是否有
    if (this.$store.state.token) {
      try {
        // 有的话发送请求
        const res = await UserResRequest();
        console.log(res)
        // 请求发送如果失败，状态码不等于200，将登录状态改成false
        if (res.data.status !== 200) { 
          this.LoginState(false)
          return
        }
        // 发送成功赋值拿去渲染页面
        this.UserResList = res.data.body;
        // 登录状态改为true
        this.LoginState(true)
      } catch (err) {
        console.log(err);
        this.LoginState(false)
      }
    } else {
      this.LoginState(false)
    }
  },
  methods: {
    // 登录状态判断
    LoginState(state) { 
      this.$store.state.LoginState = state;
      this.$store.commit("Login");
    },
    // 宫格图判断
    grid(id) {
      if (!this.$store.state.LoginState) {
        this.$toast("请先登录哦！");
        return;
      }
      if (id === 1) {
        this.$router.push({
          path: "/favorate",
        });
      }
      if (id === 2) {
        this.$router.push({
          path: "/rent",
        });
      }
    },
    // 退出键
    async SignOut() {
      const res = await UserLogoutquest()
      console.log(res);
      // this.$store.commit("setToken", "");
      location.reload();
      // this.$store.state.LoginState = false;
      // this.$store.commit("Login");
    },
  },
  computed: {
    BgcImg() {
        return this.$store.state.LoginState
               ? `http://liufusong.top:8080${this.UserResList.avatar}`
               : `http://liufusong.top:8080/img/profile/avatar.png`;
    },
    HeadImg() {
        return  this.$store.state.LoginState
              ? `http://liufusong.top:8080${this.UserResList.avatar}`
              : `http://liufusong.top:8080/img/profile/bg.png`
    },
  },
};
</script>

<style lang="less">
.User {
  // 背景图片盒子
  .UserImg {
    min-height: 300px;
    position: relative;
    img {
      width: 100%;
    }

    .head-portrait {
      position: relative;
      transform: translateY(-50%);
      border-radius: 50%;
      width: 70px;
      height: 70px;
      border: 5px solid #f5f5f5;
      display: inline-block;
      box-shadow: 0 2px 2px #bdbdbd;
      text-align: center;
    }
    .Userdata {
      text-align: center;
      padding-top: 15px;
      margin: -20px 20px;
      width: 85%;
      line-height: 30px;
      .UserName {
        margin-top: -30px;
        margin-bottom: 10px;
      }
      .OutBtn {
        margin-top: -20px;
      }
      h6 {
        margin-top: 12px;
        color: #999;
      }
    }
  }
  // 用户登录盒子
  .UserCore {
    position: absolute;
    background: #fff;
    width: 75%;
    height: 55%;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px 3px #ddd;
    margin: 50px auto 0;
    padding: 0 20px;
    text-align: center;
    font-size: 13px;

    .icon {
      width: 100%;
      border-radius: 50%;
    }
  }
  // 底部广告图
  .advertisement {
    text-align: center;
    img {
      width: 90%;
    }
  }
}
</style>
